<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>人物头像切换</title>
		<style>
			body{
				margin: 0 auto;
				width:500px ;
			}
			img{
				width:400px;
				height: 500px;
				}
		</style>
	</head>
	<body>
		<img  src="1.jpg" id="touxiang"/>
		<input type="button" id="huanren" value="头像换一换" />
		<script>
			var tupian=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];
			huanren.onclick=function(){
				if(huanren.value=="停"){
					clearInterval(timer);
					huanren.value="头像换一换"
				}else{
					timer=setInterval(f1,300);
					huanren.value="停";
				}
			}
			function f1(){
				touxiang.src="img/"+tupian[Math.floor(Math.random()*tupian.length)];
			}
			f1()
		</script>
	</body>
</html>
